<template>
	<view class="cate">
		<view class="top">
			<u-search placeholder="输入商品名称" v-model="keyword" @custom='custom' @clear="clearSearch"></u-search>
		</view>
		<view class="content">
			<view class="left">
				<scroll-view scroll-y="true" :style="{height:height+'px'}" class="scroll-item">
					<view v-for="(item,index) in oneCateList" :key="item.id">
						<view class="left-item" v-for="(v,i) in item.children" :key='i' @click="change(index,i)"
							:class="activeIndex==index+'-'+i?'active':''">{{v.name}}</view>
					</view>

				</scroll-view>
			</view>
			<view class="right" v-if="twoList.length!=0">
				<scroll-view scroll-y="true" :style="{height:height+'px'}" @scrolltolower='scrollTolower'>
					<view class="a">
						<view class="right-item" v-for="(item,index) in twoList" :key='index'
							@click="todetail(item.id)" v-if="twoList.length!=0">
							<image :src="item.cover_url" mode="widthFix"></image>
							<view class="u-line-1">
								{{item.title}}
							</view>
						</view>
						<view v-if="twoList.length==0" class="u-flex-1 u-p-t-80">
							<u-empty text="暂无数据" mode="list"></u-empty>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>





	</view>
</template>
<script>
	import {
		goodsList
	} from '../../common/http.api.js'
	export default {
		data() {
			return {
				page: 1,
				oneCateList: [],
				twoList: [],
				height: '',
				activeIndex: "0-0",
				keyword: "",
				id: 0,
				isLast:true
			}
		},
		onLoad() {
			// 获取可使用屏幕高度
			this.height = uni.getSystemInfoSync().windowHeight;
			this.getCateList()
		},
		methods: {
			change(v, i) {
				if (this.activeIndex == v + '-' + i) return
				this.activeIndex = v + '-' + i;
				this.id = this.oneCateList[v].children[i].id;
				this.page=1;
				this.twoList=[];
				this.getCateList()
			},
			// 获取分类列表
			async getCateList() {
				const params = {
					page: this.page,
					title: this.keyword,
				}
				if (this.id) params.category_id = this.id;
				const res = await this.$u.api.goodsList(params);
				this.oneCateList = res.data.categories;
				this.twoList = [...this.twoList,...res.data.goods.data];
				this.isLast=res.data.goods.next_page_url?true:false;
				console.log(res)
			},
			todetail(id) {
				const url = '/pages/detail/detail?id=' + id;
				uni.navigateTo({
					url
				})
			},
			custom() {
				this.page = 1;
				this.twoList=[];
				this.getCateList()
			},
			clearSearch() {
				this.page = 1;
				this.keyword = "";
				this.twoList=[];
				this.getCateList()
			},
			scrollTolower(){
				if(!this.isLast) return uni.showToast({
					title:'没有更多了~',
					icon:'none'
				})
				this.page++;
				this.getCateList()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.cate {
		.top {
			height: 60px;
			line-height: 60px;
			padding: 0 10px;
		}

		.content {
			display: flex;

			.left {
				background-color: #F8F8F8;

				.scroll-item {
					.left-item {
						width: 100px;
						height: 60px;
						line-height: 60px;
						text-align: center;
						position: relative;
						font-size: 14px;

						&.active {
							background-color: #FFFFFF;

							&::before {
								content: '';
								display: block;
								width: 3px;
								height: 30px;
								background-color: #007AFF;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
							}
						}

					}
				}
			}

			.right {
				flex: 1;
    
				.a {
					display: flex;
					flex-wrap: wrap;
					.right-item {
						padding: 10px;
						width: 50%;
						text-align: center;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}


	}
</style>
